import { defineStore } from 'pinia'

export const useThemeStore = defineStore('theme', {
  state: () => ({
    // 当前主题：'light' 或 'dark'
    currentTheme: 'dark',
    // 主题配置
    themes: {
      light: {
        // 背景色
        bg: {
          primary: 'bg-white',
          secondary: 'bg-gray-50',
          tertiary: 'bg-gray-100',
          card: 'bg-white',
          modal: 'bg-white',
          sidebar: 'bg-gray-50',
          hover: 'hover:bg-gray-100'
        },
        // 文字颜色
        text: {
          primary: 'text-gray-900',
          secondary: 'text-gray-700',
          tertiary: 'text-gray-500',
          muted: 'text-gray-400',
          inverse: 'text-white'
        },
        // 边框颜色
        border: {
          primary: 'border-gray-200',
          secondary: 'border-gray-300',
          subtle: 'border-gray-100',
          focus: 'border-blue-500'
        },
        // 按钮颜色
        button: {
          primary: 'bg-blue-600 hover:bg-blue-700 text-white',
          secondary: 'bg-gray-200 hover:bg-gray-300 text-gray-900',
          danger: 'bg-red-600 hover:bg-red-700 text-white'
        },
        // 输入框颜色
        input: {
          bg: 'bg-white',
          border: 'border-gray-300',
          focus: 'focus:border-blue-500 focus:ring-blue-500',
          text: 'text-gray-900',
          placeholder: 'placeholder-gray-400'
        }
      },
      dark: {
        // 背景色
        bg: {
          primary: 'bg-gray-900',
          secondary: 'bg-gray-800',
          tertiary: 'bg-gray-700',
          card: 'bg-gray-800',
          modal: 'bg-gray-800',
          sidebar: 'bg-gray-800/95',
          hover: 'hover:bg-gray-700'
        },
        // 文字颜色
        text: {
          primary: 'text-white',
          secondary: 'text-gray-300',
          tertiary: 'text-gray-400',
          muted: 'text-gray-500',
          inverse: 'text-gray-900'
        },
        // 边框颜色
        border: {
          primary: 'border-gray-700/50',
          secondary: 'border-gray-600/50',
          subtle: 'border-gray-800/30',
          focus: 'border-indigo-500'
        },
        // 按钮颜色
        button: {
          primary: 'bg-indigo-600 hover:bg-indigo-700 text-white',
          secondary: 'bg-gray-700 hover:bg-gray-600 text-gray-300',
          danger: 'bg-red-600 hover:bg-red-700 text-white'
        },
        // 输入框颜色
        input: {
          bg: 'bg-gray-700',
          border: 'border-gray-600',
          focus: 'focus:border-indigo-500 focus:ring-indigo-500',
          text: 'text-white',
          placeholder: 'placeholder-gray-400'
        }
      }
    }
  }),

  getters: {
    // 获取当前主题配置
    theme: (state) => state.themes[state.currentTheme],
    
    // 检查是否为暗色主题
    isDark: (state) => state.currentTheme === 'dark',
    
    // 检查是否为亮色主题
    isLight: (state) => state.currentTheme === 'light',
    
    // 获取主题图标
    themeIcon: (state) => state.currentTheme === 'dark' ? 'sun' : 'moon'
  },

  actions: {
    /**
     * 切换主题
     */
    toggleTheme() {
      console.log('🎨 [ThemeStore] 切换主题...')
      this.currentTheme = this.currentTheme === 'dark' ? 'light' : 'dark'
      console.log(`✅ [ThemeStore] 主题已切换为: ${this.currentTheme}`)
      
      // 更新HTML根元素的class
      this.updateDocumentTheme()
    },

    /**
     * 设置特定主题
     */
    setTheme(theme) {
      if (this.themes[theme]) {
        console.log(`🎨 [ThemeStore] 设置主题为: ${theme}`)
        this.currentTheme = theme
        this.updateDocumentTheme()
      } else {
        console.error(`❌ [ThemeStore] 未知主题: ${theme}`)
      }
    },

    /**
     * 更新文档主题
     */
    updateDocumentTheme() {
      const html = document.documentElement
      
      // 移除所有主题类
      html.classList.remove('light', 'dark')
      
      // 添加当前主题类
      html.classList.add(this.currentTheme)
      
      // 更新CSS变量（可选，用于更复杂的主题切换）
      if (this.currentTheme === 'dark') {
        html.style.setProperty('--bg-primary', '#111827')
        html.style.setProperty('--bg-secondary', '#1f2937')
        html.style.setProperty('--text-primary', '#ffffff')
      } else {
        html.style.setProperty('--bg-primary', '#ffffff')
        html.style.setProperty('--bg-secondary', '#f9fafb')
        html.style.setProperty('--text-primary', '#111827')
      }
      
      console.log('✅ [ThemeStore] 文档主题已更新')
    },

    /**
     * 初始化主题
     */
    initTheme() {
      console.log('🎨 [ThemeStore] 初始化主题...')
      
      // 从localStorage恢复主题设置
      const savedTheme = localStorage.getItem('theme')
      if (savedTheme && this.themes[savedTheme]) {
        this.currentTheme = savedTheme
        console.log(`✅ [ThemeStore] 从localStorage恢复主题: ${savedTheme}`)
      } else {
        // 检测系统主题偏好
        const prefersDark = window.matchMedia('(prefers-color-scheme: dark)').matches
        this.currentTheme = prefersDark ? 'dark' : 'light'
        console.log(`✅ [ThemeStore] 根据系统偏好设置主题: ${this.currentTheme}`)
      }
      
      this.updateDocumentTheme()
    }
  },

  // 持久化配置
  persist: {
    storage: localStorage,
    paths: ['currentTheme'],
    beforeRestore: (context) => {
      console.log('🔄 [ThemeStore] 正在恢复主题设置...')
    },
    afterRestore: (context) => {
      console.log('✅ [ThemeStore] 主题设置恢复完成')
      // 恢复后立即更新文档主题
      context.store.updateDocumentTheme()
    }
  }
})
